<template>
  <div>
    <el-form
      ref="form"
      :model="model"
      @submit.native.prevent="save"
      label-width="100px"
      style="max-width: 800px;"
      v-loading="loading"
    >
      <h2 style="margin-left:2rem; color: #409EFF;" v-if="this.id">编辑信息</h2>
      <!-- 个人信息 -->
      <el-form-item label="角色所属">
        <el-select v-model="model.user_type" required filterable placeholder="请选择角色">
          <el-option
            v-for="item in typeList"
            :key="item._id"
            :label="item.type_name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="业主名字">
        <el-input v-model="model.name" required placeholder="支持中文"></el-input>
      </el-form-item>
      <el-form-item label="业主账号" v-if="!this.id">
        <el-input v-model="model.account" required placeholder="我也不知道微信传过来的是什么玩意儿"></el-input>
      </el-form-item>
      <el-form-item label="业主密码" v-if="!this.id">
        <el-input v-model="model.password" required placeholder="不少于5位"></el-input>
      </el-form-item>

      <el-form-item label="业主手机号">
        <el-input v-model="model.phone" minlength="11" maxlength="11" required placeholder="11位手机号"></el-input>
      </el-form-item>

      <!-- 居住信息 -->
      <el-form-item label="所在小区">
        <el-select v-model="model.parentCell" required filterable placeholder="请选择角色">
          <el-option v-for="item in cellList" :key="item._id" :label="item.name" :value="item._id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所在楼号">
        <el-select v-model="model.parentFloor" required filterable placeholder="请选择角色">
          <el-option
            v-for="item in floorList"
            :key="item._id"
            :label="item.parentCell.name+'  '+item.name"
            :value="item._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="居住房间号">
        <el-input v-model="model.room" required placeholder="别写成老王的"></el-input>
      </el-form-item>
      <el-form-item label="车位号">
        <el-input v-model="model.carNumber" required placeholder="首先你要有车，没有就写无"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit" v-if="this.id">保存</el-button>
        <el-button type="primary" native-type="submit" v-else>立即创建</el-button>
        <el-button @click="back" :plain="true"  v-if="this.id">取消</el-button>
        <el-button @click="cancel" :plain="true" v-else>取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: this.$route.params.id,
      model: {},
      cellList: [],
      floorList: [],
      typeList: [],
      userList: [],
      loading: true
    };
  },
  mounted() {
    this.ifLoading();
    this.fetchCell();
    this.fetchFloor();
    this.fetchType();
    this.fetchUser();
    this.id && this.fetchOneUser();
  },
  methods: {
    cancel() {
      this.model = {};
    },
    back(){
      this.$router.go(-1)
    },
    ifLoading() {
      this.id ? (this.loading = true) : (this.loading = false);
    },
    //获取小区
    async fetchCell() {
      const cell_list = await this.$http.get("rest/cell_list");
      this.cellList = cell_list.data;
    },
    //获取楼号
    async fetchFloor() {
      const floor_list = await this.$http.get("rest/floor_list");
      this.floorList = floor_list.data;
    },
    //获得类别
    async fetchType() {
      const type_list = await this.$http.get("rest/type_list");
      this.typeList = type_list.data;
    },
    //获得所有用户
    async fetchUser() {
      const user_list = await this.$http.get("rest/user_list");
      this.userList = user_list.data;
    },
    //获得单个用户
    async fetchOneUser() {
      const response = await this.$http.get(`rest/user_one/${this.id}`);
      //model添加未重复的,有重复就直接赋值
      this.model = Object.assign({}, this.model, response.data);
      this.loading = false;
    },

    //提交
    async save() {
      //重复判断
      let flag = this.userList.every(item => {
        let a =
          item.name == this.model.name || item.account == this.model.account;
        return !a;
      });

      //判断是否是编辑界面
      if (this.id) {
        const response = await this.$http.put(
          `rest/user_one/${this.id}`,
          this.model
        );
         this.$message({
            type: "success",
            message: "保存成功",
            duration: 2000
          });

          this.$router.push("/userin/list");
      } else {
        if (flag) {
          const response = await this.$http.post("rest/add_user", this.model);
          this.$message({
            type: "success",
            message: "保存成功",
            duration: 2000
          });

          this.fetchFloor();
        } else {
          this.$message({
            type: "warning",
            message: "已存在该内容",
            duration: 2000
          });
        }

        this.$router.push("/userin/list");
      }
    }//end
  }
};
</script>

<style>
</style>